<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-box="message">

        </div>
        <button @click="change">点击</button>
    </div>
</body>
<script>
    Vue.cofig.productionTip = false
    let vm = new Vue({
        el:"#root",
        data:{
            message:"伟大复兴"
        },
        methods: {
            change(){
                this.message="好好学习"
            }
        },
        directives:{
            box:{
                // 绑定
                bind(element,bindings){
                    element.style.width = "300px"
                    element.style.height = "150px"
                    element.style.border = "1px solid #000"
                    element.style.background = "yellowgreen"
                    element.style.fontWeight = "bold"
                    element.style.fontSize = "40px"
                },
                // 绑定
                inserted(element,bindings){
                   var text = document.createTextNode(bindings,value)
                   element.appendChild(text)
                } ,
                // 更新
                updated(element,bindings) {
                    element.innerHTML = bindings.value
                },
            }
        }
    })
</script>
</html>